<script setup lang="ts">
import { useSlots } from 'vue'

// import { type PropType } from 'vue'
defineProps<{
  colums: { key: string; label: string }[]
  data: {
    name: string
    email: string
    role: string
  }[]
}>()
// defineProps({
//   colums: {
//     type: Array as PropType<{ key: string; label: string }[]>,
//     required: true,
//   },
//   data: {
//     type: Array as PropType<
//       {
//         name: string
//         email: string
//         role: string
//       }[]
//     >,
//     required: true,
//   },
// })
const slots = useSlots()
console.log('useSlots:', slots)
</script>

<template>
  <div class="data-table">
    <table width="800" border>
      <thead>
        <tr>
          <slot name="header" :colums="colums"></slot>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in data" :key="index">
          <slot name="row" :item="item" :index="index"></slot>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<style scoped lang="scss"></style>
